<!--  -->
<template>
    <div id="ForeLogin">
        <el-dialog v-model="dialogLoginVisible" @close="close" :show-close="false">
            <div>
                <div class="ForeLogin-head"></div>
                <div class="ForeLogin-body">
                    <div>
                        <!--            <span :class="{'active':active == 1}" @click="active = 1">微信登录</span>-->
                        <!--            <span :class="{'active':active == 2}" @click="active = 2">免密登录</span>-->
                        <span :class="{'active':active == 3}" @click="active = 3">密码登录</span>
                    </div>

                    <!--          中间-->
                    <!--          <div v-if="active == 1" class="ForeLogin-body-1">-->
                    <!--            <el-image style="width: 100px; height: 100px" :src="url" fit="fill" />-->
                    <!--          </div>-->

                    <!--          <div v-if="active == 2" class="ForeLogin-body-2">-->
                    <!--            <el-row :gutter="20">-->
                    <!--              <el-input v-model="phone" class="w-50 m-2" placeholder="手机号">-->
                    <!--                <template #prefix>-->
                    <!--                  <el-icon class="el-input__icon-2" ><Iphone /></el-icon>-->
                    <!--                </template>-->
                    <!--              </el-input>-->
                    <!--              <el-input v-model="validCode" class="w-50 m-2" placeholder="6位数字验证码">-->
                    <!--                <template #suffix>-->
                    <!--                  <el-icon class="el-input__icon-2">获取验证码</el-icon>-->
                    <!--                </template>-->
                    <!--              </el-input>-->
                    <!--              <el-button type="primary" round>登录/注册</el-button>-->
                    <!--            </el-row>-->
                    <!--          </div>-->

                    <div v-if="active == 3" class="ForeLogin-body-3">
                        <el-row :gutter="20">
                            <el-input v-model="phone" class="w-50 m-2" placeholder="手机号/邮箱/用户名">
                                <template #prefix>
                                    <el-icon class="el-input__icon-2">
                                        <Iphone/>
                                    </el-icon>
                                </template>
                            </el-input>
                            <!--              <el-input v-model="PwdInput" :type="choiceView" class="w-50 m-2" placeholder="密码">-->
                            <!--                <template #suffix>-->
                            <!--                  <el-icon class="el-input__icon-2" v-if="switchView" @click="switchView = !switchView"><View/></el-icon>-->
                            <!--                  <el-icon class="el-input__icon-2" v-if="!switchView" @click="switchView = !switchView">-->
                            <!--                    <svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg" data-v-029747aa=""><path d="M876.8 156.8c0-9.6-3.2-16-9.6-22.4-6.4-6.4-12.8-9.6-22.4-9.6-9.6 0-16 3.2-22.4 9.6L736 220.8c-64-32-137.6-51.2-224-60.8-160 16-288 73.6-377.6 176C44.8 438.4 0 496 0 512s48 73.6 134.4 176c22.4 25.6 44.8 48 73.6 67.2l-86.4 89.6c-6.4 6.4-9.6 12.8-9.6 22.4 0 9.6 3.2 16 9.6 22.4 6.4 6.4 12.8 9.6 22.4 9.6 9.6 0 16-3.2 22.4-9.6l704-710.4c3.2-6.4 6.4-12.8 6.4-22.4Zm-646.4 528c-76.8-70.4-128-128-153.6-172.8 28.8-48 80-105.6 153.6-172.8C304 272 400 230.4 512 224c64 3.2 124.8 19.2 176 44.8l-54.4 54.4C598.4 300.8 560 288 512 288c-64 0-115.2 22.4-160 64s-64 96-64 160c0 48 12.8 89.6 35.2 124.8L256 707.2c-9.6-6.4-19.2-16-25.6-22.4Zm140.8-96c-12.8-22.4-19.2-48-19.2-76.8 0-44.8 16-83.2 48-112 32-28.8 67.2-48 112-48 28.8 0 54.4 6.4 73.6 19.2L371.2 588.8ZM889.599 336c-12.8-16-28.8-28.8-41.6-41.6l-48 48c73.6 67.2 124.8 124.8 150.4 169.6-28.8 48-80 105.6-153.6 172.8-73.6 67.2-172.8 108.8-284.8 115.2-51.2-3.2-99.2-12.8-140.8-28.8l-48 48c57.6 22.4 118.4 38.4 188.8 44.8 160-16 288-73.6 377.6-176C979.199 585.6 1024 528 1024 512s-48.001-73.6-134.401-176Z" fill="currentColor"></path><path d="M511.998 672c-12.8 0-25.6-3.2-38.4-6.4l-51.2 51.2c28.8 12.8 57.6 19.2 89.6 19.2 64 0 115.2-22.4 160-64 41.6-41.6 64-96 64-160 0-32-6.4-64-19.2-89.6l-51.2 51.2c3.2 12.8 6.4 25.6 6.4 38.4 0 44.8-16 83.2-48 112-32 28.8-67.2 48-112 48Z" fill="currentColor"></path></svg>-->
                            <!--                  </el-icon>-->
                            <!--                </template>-->
                            <!--              </el-input>-->
                            <el-input
                                    v-model="password"
                                    type="password"
                                    placeholder="密码"
                                    show-password
                                    @keyup.enter.native="login"
                            />
                            <el-button type="primary" round @click.="login">登录/注册</el-button>
                        </el-row>
                    </div>

                    <!--          底部-->
                    <div class="ForeLogin-footer">
                        <div>其他登录方式</div>
                        <div>
                            <el-avatar
                                    src="https://p3-passport.byteimg.com/img/user-avatar/04be72c847a69ff2d65bffde6264855d~100x100.awebp"
                            />
                            <el-avatar
                                    src="https://p3-passport.byteimg.com/img/user-avatar/04be72c847a69ff2d65bffde6264855d~100x100.awebp"
                            />
                            <el-avatar
                                    src="https://p3-passport.byteimg.com/img/user-avatar/04be72c847a69ff2d65bffde6264855d~100x100.awebp"
                            />
                            <el-avatar
                                    src="https://p3-passport.byteimg.com/img/user-avatar/04be72c847a69ff2d65bffde6264855d~100x100.awebp"
                            />
                            <el-avatar
                                    src="https://p3-passport.byteimg.com/img/user-avatar/04be72c847a69ff2d65bffde6264855d~100x100.awebp"
                            />
                            <el-avatar
                                    src="https://p3-passport.byteimg.com/img/user-avatar/04be72c847a69ff2d65bffde6264855d~100x100.awebp"
                            />
                        </div>
                        <div>
                            <el-checkbox v-model="checked" size="large"/>
                            <span style="margin-left: 10px">我已阅读并同意 服务条款 和 隐私协议</span>
                        </div>
                    </div>
                </div>
            </div>
        </el-dialog>
    </div>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from ‘《组件路径》‘;
import {mapState, mapGetters, mapActions, mapMutations} from "vuex";
import {Search, Iphone, View, Hide} from '@element-plus/icons'
import {ElMessage} from "element-plus";
import request from "@/utils/request";
import {login} from '@/api/blog/auth'

export default {
    name: "ForeLogin",
//import引入的组件需要注入到对象中才能使用
    components: {
        Search, Iphone, View, Hide,
    },
    data() {
//这里存放数据
        return {
            dialogLoginVisible: false,
            url: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
            active: 3,
            checked: true,
            switchView: false,
            password: '',
            phone: '',
            validCode: ''
        };
    },
    inject: ['foreHead_judgePerson'],
    props: {},
//监听属性 类似于data概念
    computed: {
        ...mapState("app", ["loginSwitch"]),
        ...mapGetters("app", ["GET_LOGIN"]),
    },
//监控data中的数据变化
    watch: {
        loginSwitch(newVal, oldVal) {
            this.dialogLoginVisible = newVal
        },
    },
//方法集合
    methods: {
        ...mapMutations("app", ["TOGGLE_LOGIN", "CLOSE_LOGIN"]),
        ...mapActions("app", ["toggleLogin"]),
        ...mapMutations("user", ["SET_TOKEN", "SET_CURRENTUSER", "SET_CURRENTUSERID"]),
        ...mapGetters("user", ["GET_TOKEN", "GET_CURRENTUSER", "GET_CURRENTUSERID"]),
        ...mapActions("user", ["Login"]),
        close() {
            this.CLOSE_LOGIN()
        },
        choiceView() {
            if (this.switchView) {
                return 'text'
            } else {
                return 'hidden'
            }
        },
        login() {
            if (this.checked == false) {
                this.$message.error("请勾选协议")
                return
            }
            if (this.active == 3) {//密码登录
                if (this.phone == '') {
                    ElMessage({
                        message: '请输入手机号/邮箱/用户名',
                        type: 'warning',
                    })
                    return
                }
                if (this.password == '') {
                    ElMessage({
                        message: '请输入密码',
                        type: 'warning',
                    })
                    return
                }
                login({
                    username: this.phone,
                    password: this.password
                }).then(res => {
                    if (res.code == 0) {
                        console.log("res", res)
                        this.Login(res)
                        console.log("=========================")
                        // this.$router.go(-1)
                        this.CLOSE_LOGIN()
                        this.foreHead_judgePerson()
                        // location.reload()
                    }
                })

            }
        },
    },
//生命周期 - 创建完成（可以访问当前this实例）
    created() {

    },
//生命周期 - 挂载完成（可以访问DOM元素）
    mounted() {

    },
    beforeCreate() {
    }, //生命周期 - 创建之前
    beforeMount() {
    }, //生命周期 - 挂载之前
    beforeUpdate() {
    }, //生命周期 - 更新之前
    updated() {
    }, //生命周期 - 更新之后
    beforeDestroy() {
    }, //生命周期 - 销毁之前
    destroyed() {
    }, //生命周期 - 销毁完成
    activated() {
    }, //如果页面有keep-alive缓存功能，这个函数会触发
}
</script>
<style lang="less" scoped>
@import "../../style/blog/ForeLogin.less";
</style>

